import { useRef,useEffect} from 'react'
import * as echarts from 'echarts'
import {getMoney} from '@/utils/money'
import dayjs from 'dayjs'
export default function LineChart(props:{
  data: any[]
}){
  const option = {
    grid: [{ left: 16, top: 20, right: 16, bottom: 20 }],
    tooltip: {
      show: true,
      trigger: 'axis',
      formatter: ([item]: any) => {
        const [x, y] = item.data
        return `${dayjs(x).format('YYYY年MM月DD日')} ￥${getMoney(y)}`
      },
    },
    xAxis: {
      type: 'time',
      boundaryGap: ['3%', '0%'],
      axisLabel:{
        formatter:(value: string)=>{
          return dayjs(value).format('MM-DD')
        },
      },
      axisTick: {
        alignWithLabel: true,
      },
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        show: false
      }
    },
  }
  const chartRef = useRef(null)
  useEffect(() => {
    const myChart = echarts.init(chartRef.current);
    myChart.setOption({
      ...option,
      series: [
        {
          data: props.data,
          type: 'line'
        }
      ]
    });

    return () => {
      myChart.dispose();
    };
  }, [props.data]);
  return <div ref={chartRef} style={{ width: '100%', height: '128px' }} />;
}